<template>
	<rui-card title="Pro会员权限" more="邀请好友兑换Pro会员" @change="$rui.route('/pages/user/invite/invite')">
		<view class="auth">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="icon">
					<uni-icons :type="item.icon" size="30" color="#ffd49e"></uni-icons>
				</view>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
	</rui-card>

</template>

<script setup>
	import {
		ref
	} from "vue"

	let list = [{
			icon: 'search',
			name: "不限查询数量"
		},
		{
			icon: 'loop',
			name: "可查二次"
		},
		{
			icon: 'vip',
			name: "身份标识"
		},
		{
			icon: 'headphones',
			name: "客服支持"
		},
	]
</script>

<style lang="scss" scoped>
	.auth {
		display: flex;
		flex-wrap: wrap;
		.item {
			width: 25%;
			text-align: center;
		margin: 20rpx 0;
			.icon {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-image: linear-gradient(-45deg, #333, #555);
				border-radius: 50%;
				margin: 0 auto 10rpx;
			}
			.name{
				font-size: 24rpx;
			}
		}
	}
</style>